import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'

import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Search from '../views/Search.vue'
import Individual from '../views/Individual.vue'
import Recommend from '../views/Recommend.vue'
import Shop from '../views/Shop.vue'
import MusicCustomization from '../views/MusicCustomization.vue'
import Navigation from '../components/Navigation.vue'
import Piano from '../components/Piano.vue'



Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/navigation',
    name: 'Navigation',
    component: Navigation
  },
  {
    path: '/searchPage',
    name: 'Search',
    component: Search
  },
  {
    path: '/individualPage',
    name: 'Individual',
    component: Individual
  },
  {
    path: '/recommend',
    name: 'Recommend',
    component: Recommend
  },
  {
    path: '/piano',
    name: 'Piano',
    component: Piano
  },
  {
    path: '/shop',
    name: 'Shop',
    component: Shop
  },
  {
    path: '/customization',
    name: 'MusicCustomization',
    component: MusicCustomization
  },

]

const router = new VueRouter({
  routes
})

// 设置路由白名单
const whiteList = ['/login','/']
const userName = localStorage.getItem("userName")
// 路由守卫
router.beforeEach((to, from, next) => {
  // 如果本地存储没有userName字段并且路由目的地不在路由白名单中就跳转到登陆页
  if (!userName && whiteList.indexOf(to.path) === -1){
    next({ path: '/login', replace: true})
  }
  next()
})

export default router
